<template>
  <div class="homecontent">
        <div class="homeleft">
            <div class="lefttop">

            </div>
            <div class="gongnengbox">
                <div class="gongnengtitle">常用功能</div>
                <div class="shezhibox">
                    <div class="iconfont icon-shezhi"></div>
                    设置
                </div>
                <div class="allgongneng">
                        <div class="itemgongneng">
                             <div class="yuan">
                                <div class="iconfont icon-insight-icon "></div>
                             </div>
                             <div class="name">活期账户</div>
                             <div class="label">账户查询</div>
                        </div>
                          <div class="itemgongneng">
                             <div class="yuan red">
                                <div class="iconfont icon-hongbao "></div>
                             </div>
                             <div class="name">对账单查询与...</div>
                             <div class="label">账户查询</div>
                        </div>
                          <div class="itemgongneng">
                             <div class="yuan orange">
                                <div class="iconfont icon-zhangdan"></div>
                             </div>
                             <div class="name">电子回单查询</div>
                             <div class="label">账户查询</div>
                        </div>
                          <div class="itemgongneng">
                             <div class="yuan">
                                <div class="iconfont icon-rukuqingdan "></div>
                             </div>
                             <div class="name">单笔付款</div>
                             <div class="label">转账业务</div>
                        </div>
                </div>
            </div>
            <div class="daibanbox">
                <div class="daibantabbox">
                    <div class="itemdaiban" :class="daibanindex==0?'active':''" @click="daibanindex=0">待办</div>
                    <div class="itemdaiban" :class="daibanindex==1?'active':''" @click="daibanindex=1">经办</div>
                    <div class="itemdaiban" :class="daibanindex==2?'active':''" @click="daibanindex=2">提示信息</div>
                </div>
                <div class="daibanlistbox">
                    <img src="../../assets/img/未找到文件.png" alt="">
                </div>
                <div class="daibancontent">
                    <div class="itemcontent">
                        <div class="title">
                            在线进销存
                        </div>
                        <div class="txt">
                            订单、货、账管理一步到位，更有专属贷款为企业解决融资难题
                        </div>
                    </div>
                          <div class="itemcontent">
                        <div class="title">
                            智能财务应用
                        </div>
                        <div class="txt">
                            智能化提升企业财务管理水平，多维度可视化数据支撑企业经营决策
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="homeright">
            <div class="msgbox">
                <div class="msgleft">
                    <div class="msgtitle">未读消息 <div class="dian"></div></div>
                    <div class="msg">您有未读的历史消息，可点击"查看全部" 阅读</div>
                </div>
                <div class="lookall">查看全部</div>
            </div>
            <div class="cardbox">
                <div class="cardtitle">
                    账户概览 <div class="shuaxin">
                        <div class="iconfont icon-shuaxin"></div>
                        刷新
                    </div>
                </div>
                <div class="cardnumline">
                    <div class="comname">江苏知己新能源科技有限公司</div>
                    <div class="num">32001647136052522743</div>
                    <div class="iconfont icon-shezhi"></div>
                    <div class="zhanghubox">
                        <div class="iconfont icon-sousuo"></div>
                        账户查询
                    </div>
                </div>
                <div class="showline">
                账面余额 <div class="iconfont icon-yanjing"></div>
                </div>
                <div class="moneybox">
                    ¥1,003.38
                    <div class="iconfont icon-bangzhu"></div>
                </div>
            </div>
            <div class="rightbanner">
                <div class="righttabbox">
                    <div class="itembannertab" :class="bannertabindex==0?'active':''" @click="bannertabindex=0">
                        <div class="yuan ">
                            <div class="iconfont icon-guketiaochawenjuanbiao"></div>
                        </div>
                        <div class="name">
                            业务专区
                        </div>
                    </div>
                    <div class="itembannertab" :class="bannertabindex==1?'active':''" @click="bannertabindex=1">
                        <div class="yuan">
                            <div class="iconfont icon-guketiaochawenjuanbiao"></div>
                        </div>
                        <div class="name">
                            理财推荐
                        </div>
                    </div>
                        <div class="itembannertab" :class="bannertabindex==2?'active':''" @click="bannertabindex=2">
                        <div class="yuan">
                            <div class="iconfont icon-guketiaochawenjuanbiao"></div>
                        </div>
                        <div class="name">
                            融资推荐
                        </div>
                    </div>
                    <div class="itembannertab" :class="bannertabindex==3?'active':''" @click="bannertabindex=3">
                        <div class="yuan">
                            <div class="iconfont icon-guketiaochawenjuanbiao"></div>
                        </div>
                        <div class="name">
                            产品小助手
                        </div>
                    </div>
                </div>
            </div>
            <div class="titletab">
                <div class="itemitit">外汇专区</div>
                <div class="itemitit act">科技金融专区</div>
                <div class="itemitit">云服务专区</div>
                
            </div>
            <img src="../../assets/img/homerighttop.png" alt="">
            <div class="fuwuline">
                <div class="itemfuwu">
                    <div class="yuan">
                        <div class="iconfont icon-quxian"></div>
                    </div>
                    <div class="fuwuname">股权融资</div>
                </div>
                   <div class="itemfuwu">
                    <div class="yuan orange">
                        <div class="iconfont icon-daikuan1"></div>
                    </div>
                    <div class="fuwuname">信贷业务</div>
                </div>
                   <div class="itemfuwu">
                    <div class="yuan perpo">
                        <div class="iconfont icon-tongqian"></div>
                    </div>
                    <div class="fuwuname">债券融资</div>
                </div>
                   <div class="itemfuwu">
                    <div class="yuan red">
                        <div class="iconfont icon-san"></div>
                    </div>
                    <div class="fuwuname">保险服务</div>
                </div>
                   <div class="itemfuwu">
                    <div class="yuan">
                        <div class="iconfont icon-caidan1"></div>
                    </div>
                    <div class="fuwuname">更多服务</div>
                </div>
            </div>
            <img src="../../assets/img/homgright.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
data(){
    return{
        daibanindex:0,
        bannertabindex:0
    }
},
methods:{       

}

    
}
</script>

<style lang='less' scoped>
 .homecontent{
        width: 100% !important;
        margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
        .homeleft{
            width: 53%;
            margin-top: .4rem;
            .lefttop{
               
                width: 100%;
               background-image: url('../../assets/img/homeleft.png');
               background-size: 100% 100%;
               height: 13rem;
            }
            .gongnengbox{
                background: white;
                margin-top: .4rem;
                position: relative;
                padding-bottom: .5rem;

                .gongnengtitle{
                    font-size: 1.1rem;
                    font-weight: bold;
                    padding: 0.4rem 0.5rem;
                    color: gray;
                    margin: 0.2rem;
                }
                .shezhibox{
                    position: absolute;
                    right: 0;
                    top: 0;
                    color: #88D2FF;
                    display: flex;
                    align-items: center;
                    background: #EFF8FE;
                    padding: 0.1rem 0.4rem;
                }
                .allgongneng{
                    width: 70%;
                  
                    margin-left: 0.5rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                    margin-top: 0.4rem;
                    .itemgongneng{
                        width: 25%;
                        text-align: center;
                        .yuan{
                            width: 2.4rem;
                            height: 2.4rem;
                            text-align: center;
                            line-height: 2.4rem;
                            border-radius: 50%;
                            margin: auto;
                            background: #FFECDF;
                            .iconfont{
                                font-size: 1.4rem;
                                color: #FABC67;
                            }
                        }
                        .orange{
                            background: #F9F4F1;
                            .iconfont{
                                color: #FFBD60;
                            }
                        }
                        .red{
                            background: #F5EDDA;
                            .iconfont{
                                color: #FF969D;
                            }
                        }
                        .cheng{
                            .iconfont{
                                color: #FAB58D;
                            }
                        }
                        .name{
                            font-size: 0.85rem;
                            margin-top: 0.2rem;
                        }
                        .label{
                            font-size: 0.75rem;
                            color: gray;
                        }

                    }
                }
            }
            .daibanbox{
                width: 100%;
                background: white;
                margin-top: .4rem;
                box-sizing: border-box;
                padding: 0.2rem;
                .daibantabbox{
                    display: flex;
                    align-items: center;
                    margin-top: 0.3rem;
                     border-bottom: 2px solid #F5EDDA;
                    .itemdaiban{
                        width: 5rem;
                        height: 3rem;
                        text-align: center;
                        border-bottom: 2px solid #F5EDDA;
                        cursor: pointer;
                        color: gray;
                    }
                    .active{
                        color: #2293D7;
                        border-bottom: 2px solid #2293D7;
                    }
                    
                }
                .daibanlistbox{
                    width: 100%;
                    height: 10rem;
                   
                    img{
                        width: 6rem;
                        height: 5rem;
                        margin:2rem auto ;
                        display: block; 
                    }
                }
                .daibancontent{
                    width: 100%;
                  
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                    .itemcontent{
                        width: 49%;
                        height: 100%;
                        border: 1px solid #F5EDDA;
                        border-radius: 0.5rem;
                        padding: 0.5rem;
                        box-sizing: border-box;
                        .title{
                            font-weight: bold;
                            margin: 0.3rem 0;
                        }
                        .txt{
                            font-size: 0.7rem;
                            color: gray;
                        }
                    }
                }
                
                
            }
            
        }
        .homeright{
            width: 46.5%;
            height: 100%;
            .msgbox{
                width: 100%;
                height: 5rem;
                box-sizing: border-box;
                padding: 0.3rem ;
                background: white;
                display: flex;
               
                justify-content: space-between;
                .msgleft{
                  width: 75%;
                  .msgtitle{
                    font-weight: bold;
                    font-size: 0.95rem;
                    display: flex;
                    align-items: center;
                    .dian{
                        width: .2975rem;
                        height: .2975rem;
                        border-radius: 50%;
                        background: red;
                        margin-bottom: 0.4rem;
                    }

                  } 
                  .msg{
                    font-size: 0.7rem;
                  } 
                }
                .lookall{
                    font-size: 0.85rem;
                    color: #2293D7;
                }
            }
            .cardbox{
                 width: 100%;
               
                box-sizing: border-box;
                padding: 0.6rem ;
                background: white;
                margin-top: 0.4rem;
                .cardtitle{
                    display: flex;
                    align-items: center;
                    .shuaxin{
                        display: flex;
                        align-items: center;
                        margin-left: 0.3rem;
                        color: #2293D7;
                        font-size: 0.8rem;
                    }
                }
                .cardnumline{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    line-height: 2.3;
                   
                    box-sizing: border-box;
                    padding: 0 0.4rem;
                    .comname{
                        font-size: 0.82rem;
                    }
                    .num{
                        font-size: 0.78rem;
                        color: gray;
                        margin: 0 0.3rem;
                    }
                    .icon-shezhi{
                        color: gray;
                    }
                    .zhanghubox{
                        display: flex;
                        align-items: center;
                        margin-left: 3rem;
                        font-size: 0.7rem;
                        color: #2293D7;

                    }
                }
                .showline{
                    display: flex;
                    align-items: center;
                    color: gray;
                    font-size: 0.8rem;
                     padding: 0 0.4rem;
                    .iconfont{
                        margin-left: 0.3rem;
                    }
                }
                .moneybox{
                    font-weight: bold;
                    line-height: 2.1;
                    display: flex;
                    align-items: center;
                     padding: 0 0.4rem;
                    .iconfont{
                        color: #2293D7;
                        font-size: 0.8rem;
                    }
                }
            }

          .rightbanner{
            width: 100%;
            background: white;
            margin-top: 0.4rem;
            box-sizing: border-box;
            padding: 0.3rem;
            .righttabbox{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                .itembannertab{
                    width: 22%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-bottom: 0.5rem;
                    font-size: 0.8rem;
                    .yuan{
                        width: 1.4rem;
                        height: 1.4rem;
                        border-radius: 50%;
                        background: #F2F2F2;
                        line-height: 1.4rem;
                        text-align: center;
                        margin-right: 0.2rem;
                        .iconfont{
                            color: white;
                        }
                        
                    }
                   
                }
                 .active{
                       color: #2293D7;
                       border-bottom: 2px solid #2293D7;
                       .yuan{
                        background: pink !important;
                       }
                    }
            }
          }
          .titletab{
            width: 100%;
            display: flex;
            align-items: center;
           margin: 0.5rem 0.3rem;
           padding-top: 0.8rem;
            .itemitit{
                font-size: 0.8rem;
                color: gray;
                padding: 0.1rem 0.3rem;
                margin-right: 0.4rem;
              
            }
            .act{
                color: #2293D7;
                  background: #DEF0FF;
            }
            
          }
          .fuwuline{
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            margin: 0.6rem 0;
            background: white;
            padding-top: 0.8rem;
            .itemfuwu{
                width: 20%;
                text-align: center;
                .yuan{
                    width:2rem;
                    height: 2rem;
                    border-radius: 50%;
                    margin: auto;
                    background: #F2F9FF;
                    color: #BED6F2;
                    line-height: 2rem;
                    margin-bottom: 0.3rem;
                    .iconfont{
                        font-size: 1.2rem;
                    }

                }
                .orange{
                    background: #FEF1E8;
                    color: #FED0BF;
                }
                .perpo{
                    background: #F3F1FC;
                    color: #DBD5F8;
                }
                .red{
                    background: #FEF2F5;
                    color: #FED3DA;
                }
                .fuwuname{
                    font-size: 0.8rem;
                }
            }
          }
          img{
            width: 100%;
            height: 7rem;
            border-radius: 1rem;
            margin-top: 0.4rem;

          }
        }
    }
</style>